<!--
    模板文件

    author Yuanao
    date 2021年11月11日19:25:45
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>在线预约</title>

    <!-- css -->
    <link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" type="text/css" href="/plugins/cubeportfolio/css/cubeportfolio.min.css">
    <link href="/css/nivo-lightbox.css" rel="stylesheet"/>
    <link href="/css/nivo-lightbox-theme/default/default.css" rel="stylesheet" type="text/css"/>
    <link href="/css/owl.carousel.css" rel="stylesheet" media="screen"/>
    <link href="/css/owl.theme.css" rel="stylesheet" media="screen"/>
    <link href="/css/animate.css" rel="stylesheet"/>
    <link href="/css/style.css" rel="stylesheet">

    <!-- boxed bg -->
    <link id="bodybg" href="/bodybg/bg1.css" rel="stylesheet" type="text/css"/>
    <!-- template skin -->
    <link id="t-colors" href="/color/default.css" rel="stylesheet">
    <!--    -->
    <script src="/js/pageWriteHtml.js" charset="UTF-8"></script>
    <style>
        #title {
            margin-top: 200px;
            text-align: center;
        }
        #table_row {
            width: 80%;
            margin: 50px auto;
            /*border: 1px solid black;*/
            padding: 10px;
            border-radius: 10px;
            background-color: white;
        }
    </style>
</head>

<body id="page-top" data-spy="scroll" data-target=".navbar-custom">

<div id="wrapper">

    <!--  将头部信息写入到这里  -->
    <script>writeHtmlAsHead();</script>
    <h1 id="title">我的预约</h1>
    <div id="table_row">
        <table class="table table-striped">
            <thead>
            <tr>
                <th scope="col">预约编号</th>
                <th scope="col">预约科室</th>
                <th scope="col">预约医生</th>
                <th scope="col">预约时间</th>
                <th scope="col">预约时间段</th>
                <th scope="col">预约状态</th>
                <th scope="col">操作</th>
            </tr>
            </thead>
            <tbody id="tbody">
<!--            <tr>-->
<!--                <th scope="row">1</th>-->
<!--                <td>内分泌科</td>-->
<!--                <td>白医生</td>-->
<!--                <td>2021-13-12</td>-->
<!--                <td>08:00 &#45;&#45; 10:00</td>-->
<!--                <td>未交费</td>-->
<!--                <td>-->
<!--                    <button class="btn btn-primary btn-small">缴费</button>-->
<!--                </td>-->
<!--            </tr>-->
            </tbody>
        </table>


    </div>


    <!-- 缴费的模态框 -->
    <div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="staticBackdropLabel">请支付</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" align="center">

                    <div>
                        <img height="200px" width="200px" src="https://qr.api.cli.im/newqr/create?data=%25E8%25AF%25B7%25E6%2594%25AF%25E4%25BB%2598%25E8%25B4%25B9%25E7%2594%25A8100%25E5%2585%2583&level=H&transparent=false&bgcolor=%23FFFFFF&forecolor=%23000000&blockpixel=12&marginblock=1&logourl=&logoshape=no&size=260&kid=cliim&key=429d74a4ca2e34ab25297388657c5039" alt="">
                    </div>
                    <p align="center">100元</p><button id="simulationCapture">模拟缴费</button>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
<!--                    <button type="button" class="btn btn-primary">Understood</button>-->
                </div>
            </div>
        </div>
    </div>




    <!--  将头部信息写入到这里  -->
    <script>writeHtmlAsFooter();</script>


</div>
<a href="#" class="scrollup"><i class="fa fa-angle-up active"></i></a>

<!-- Core JavaScript Files -->
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/jquery.easing.min.js"></script>
<script src="/js/wow.min.js"></script>
<script src="/js/jquery.scrollTo.js"></script>
<script src="/js/jquery.appear.js"></script>
<script src="/js/stellar.js"></script>
<script src="/plugins/cubeportfolio/js/jquery.cubeportfolio.min.js"></script>
<script src="/js/owl.carousel.min.js"></script>
<script src="/js/nivo-lightbox.min.js"></script>
<script src="/js/custom.js"></script>
<script src="/contactform/contactform.js"></script>

<script>
    /*************** 校验登录信息 *****************/
    let userJsonStr = localStorage.getItem("user");
    if (userJsonStr == undefined || userJsonStr == null || userJsonStr == "") {
        //没有登录,跳转登录页面
        document.location = "/page/login.html?url=" + encodeURIComponent(location.href);
    }

    var user = JSON.parse(userJsonStr); //获取user登录对象



    /******本地使用的参数*******/
    var bookId = -1;




    /***********请求初始化页面***********/

    $.post("http://localhost:8080/api/book/getUserSelectBook", {
        id: user.id
    }, (data, status) => {
        if (status === "success" && data.code === 0) {
            let rows = data.data;
            let $tbody = $("#tbody");
            for (let i = 0; i < rows.length; i++) {
                let obj = rows[i];

                let element = $(' <tr>\n' +
                '                <th scope="row">' + obj.id + '</th>\n' +
                '                <td>' + obj.departmentName + '</td>\n' +
                '                <td>' + obj.doctorName + '</td>\n' +
                '                <td>' + obj.date + '</td>\n' +
                '                <td>' + obj.timeQuantumName + '</td>\n' +
                '                <td>' + obj.bookStatus + '</td>\n' +
                '                <td>' +
                (obj.bookStatus === "未支付" ? ('<button class="btn btn-primary btn-small"  onclick="pay(' + obj.id + ')">缴费</button>') : "无" )+
                    '</td>\n' +
                    '            </tr>')

                $tbody.append(element);

            }


        }
    })


    /************事件************/

    /*
    * 模拟缴费按钮的点击事件
    * */
    $("#simulationCapture").on("click",function (event) {
        if (bookId == -1) {
            alert("错误");
            return;
        }
        $.post("http://localhost:8080/api/book/modifyBook",{
            id:bookId,
            bookStatusId:2
        },(data,status) => {
            if (status === "success" && data.code === 0) {
                alert("支付成功");
                document.location.reload();
            } else {
                alert("支付失败");
            }
        })

    })

    /**
     * 缴费按钮的点击事件
     * @param id
     */
    function pay(id) {
        bookId = id;
        $('#staticBackdrop').modal('show')
    }

</script>

</body>

</html>
